<wicket:panel>
	<div class="issue-list card">
		<div class="card-body">
			<div class="d-flex mb-4">
				<form wicket:id="query" class="clearable-wrapper flex-grow-1">
					<div class="input-group">
						<input wicket:id="input" spellcheck="false" autocomplete="off" class="form-control" placeholder="Query/order issues. Hit space to show syntax helper">
						<span class="input-group-append">
							<button wicket:id="submit" type="submit" class="btn btn-outline-secondary btn-icon" title="Query"><wicket:svg href="magnify" class="icon"></wicket:svg></button>
						</span>
					</div>
				</form>
				<a wicket:id="newIssue" class="add-new btn btn-primary btn-icon flex-shrink-0 ml-3" title="Create new issue"><wicket:svg href="plus" class="icon"/></a>
			</div>
			<div class="mb-5">
				<a wicket:id="showSavedQueries" class="show-saved-queries text-gray d-inline-block mr-4 mb-2 text-nowrap">
					<wicket:svg href="eye" class="icon"></wicket:svg> Show Saved Queries
				</a>
				<a wicket:id="saveQuery" class="save-query text-gray d-inline-block mr-4 mb-2 text-nowrap">
					<wicket:svg href="save" class="icon"></wicket:svg> Save Query
				</a>
				<a wicket:id="operations" class="text-gray mr-4 mb-2 d-inline-block text-nowrap">
					<wicket:svg href="ellipsis-circle" class="icon rotate-180"></wicket:svg> Operations
				</a>
				<a wicket:id="fieldsAndLinks" class="fields-and-links text-gray mr-4 mb-2 d-inline-block text-nowrap">
					<wicket:svg href="select" class="icon"></wicket:svg> Fields & Links
				</a>
				<a wicket:id="import" class="import-issues text-gray mr-4 mb-2 d-inline-block text-nowrap">
					<wicket:svg href="import" class="icon"></wicket:svg> Import
				</a>
				<a wicket:id="orderBy" class="order-by text-gray mr-4 mb-2 d-inline-block text-nowrap">
					<wicket:svg href="sort" class="icon"></wicket:svg> Order By
				</a>
				<a wicket:id="showProgress" class="text-gray mr-4 mb-2 d-inline-block text-nowrap">
					<wicket:svg href="clock" class="icon"></wicket:svg> Timing
				</a>
			</div>
			<div wicket:id="body" class="body">
				<div wicket:id="feedback"></div>
				<table wicket:id="issues" class="table"></table>
				<div wicket:id="tips" class="form-text text-muted">
					<wicket:svg href="bulb" class="icon icon-sm"/>
					By default issues of parent and child projects will also be listed.
					Use query <code>&quot;Project&quot; is current</code> to show issues only belong to this project
				</div>
			</div>
		</div>
	</div>
	<wicket:fragment wicket:id="contentFrag">
		<div class="primary d-flex mb-3">
			<div class="mr-4 flex-grow-1 d-flex flex-wrap row-gap-2">
				<span wicket:id="numberAndTitle" class="mr-2"></span>
				<a wicket:id="copy" title="Copy issue number and title" class="copy mr-2 btn btn-icon btn-xs btn-light btn-hover-primary">
					<wicket:svg href="copy" class="icon"/>
				</a>
				<a wicket:id="pin" title="Pin this issue" class="pin mr-2 btn btn-icon btn-xs btn-light btn-hover-primary">
					<wicket:svg href="pin" class="icon"/>
				</a>
				<span wicket:id="progress" class="d-flex align-items-center mr-2"></span>
				<span wicket:id="links" class="d-flex align-items-center links"></span>
			</div>
			<div class="flex-shrink-0 d-none d-lg-block text-muted">
				<span class="votes mr-2" title="Votes">
					<wicket:svg href="thumb-up" class="icon"></wicket:svg> <span wicket:id="votes"></span>
				</span>
				<span class="comments" title="Comments">
					<wicket:svg href="comments" class="icon"></wicket:svg> <span wicket:id="comments"></span>
				</span>
			</div>
		</div>
		<div class="secondary d-flex flex-wrap">
			<div class="flex-grow-1 d-flex flex-wrap">
				<div wicket:id="fields" class="field"></div>
			</div>
			<div class="last-update d-none d-lg-block text-muted font-size-sm">
				<a wicket:id="user" class="link-gray"></a> <span wicket:id="activity"></span> <span wicket:id="date"></span>
			</div>
		</div>
		<wicket:enclosure child="linkedIssues">
		<div class="linked-issues pl-4">
			<div wicket:id="linkedIssues" class="linked-issue"><div wicket:id="content"></div></div>
		</div>
		</wicket:enclosure>
	</wicket:fragment>
	<wicket:fragment wicket:id="stateFrag">
		<div wicket:id="transit" class="state"><span wicket:id="state"></span></div>
	</wicket:fragment>
	<wicket:fragment wicket:id="fieldsAndLinksFrag">
		<div class="issue-fields-and-links">
			<form wicket:id="form">
				<div class="modal-header">
					<h5 id="modal-title" class="modal-title">Fields & Links</h5>
					<button wicket:id="close" type="button" class="close"><wicket:svg href="times" class="icon"/></button>
				</div>
				<div class="modal-body">
					<div wicket:id="editor"></div>
				</div>
				<div class="modal-footer">
					<input wicket:id="save" type="submit" class="dirty-aware btn btn-primary" value="Save">
					<button wicket:id="useDefault" class="btn btn-primary">Use Default</button>
					<a wicket:id="cancel" class="btn btn-secondary">Cancel</a>
				</div>
			</form>
		</div>
	</wicket:fragment>	
</wicket:panel>